<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav ul{
            display: flex;
            list-style: none;
        }
        .nav ul li {
            margin: 20px
        }

    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="article in articleList">
                <!-- <router-link :to="'/detail/'+article.id">{{article.name}}</router-link> -->
                <span>{{article.name}}</span>
                <button @click="gotoDetail(article.id)">跳转到详情页</button>
            </li>
        </ul>

        <router-view></router-view>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        // 1.定义路由组建
        let articleDetail = {
            template: '<div>这是文章-- {{$route.params.id}}的详情页</div>',
            // created() {
            //     // 只要使用了路由了，那么每一个路由组件中都会多出两个对象
            //     // $router $route(属性和变量)
            //     console.log(this.$route.params.myid)
            // }
            // watch: {
            //     '$route.params': {
            //         handler(newValue) {
            //             console.log(newValue)
            //         },
            //         deep: true
            //     }
            // }
        }

        // 2.定义路径
        const routes = [
            // {
            //     path: "/",
            //     // 重定向
            //     redirect: "/detail/1"
            // },
            {
                name: "detail",
                path: "/detail/:id",
                component: articleDetail
            },
            {
                path: "*", 
                redirect: "/detail/1"
            }
        ]

        // 3.创建router实例对象
        const router = new VueRouter({
            routes
        })

        // const originalPush = VueRouter.prototype.push;
        // VueRouter.prototype.push = function push(location) {
        //     return originalPush.call(this, location).catch(err => err)
        // }


        const app = new Vue({
            el: "#app",
            router,
            methods: {
                gotoDetail(id) {
                    // this.$router.push("/detail/"+id)
                    // this.$router.push({
                    //     path: "/detail/"+id
                    // })
                    // 挺常见的
                    this.$router.push({
                        // 和routes里面的name匹配的
                        name: "detail",
                        params: {
                            id
                        }
                    })

                    // this.$router.push({ name: 'detail', params: { id}})
                }
            },
            data: {
                articleList: [
                    {
                        name: "Javascript零入门基础",
                        id: 1
                    },
                    {
                        name: "Vue项目实战开发",
                        id: 2
                    }
                ]
            }
        })
    </script>
</body>
</html>